<template>
	<view>
		<!-- 搜索列表 -->
		<block v-for="(item, index) in dataList" :key="index">
			<view class="cl-box" @click="watchLive(item)">
				<!-- <view > -->
				<image class="cl-img" :src="item.livepic"></image>
				<!-- </view> -->
				<view class="cl-info">
					<view class="cl-right">
						<view class="cl-title">{{item.livetitle}}</view>
						<block v-if="item.liveStatus=='1'">
							<view class="cl-btn cl-btn-orange" v-if="item.userLiveStatus =='0'" @click="reservation(item.id,index)">立即预约</view>
							<view class="cl-btn cl-btn-grey" v-else  @click="reservation(item.id,index)">取消预约</view>
						</block>
						<view class="cl-btn" v-if="item.liveStatus =='0'" >正在直播</view>
						<view class="cl-btn cl-btn-grey" v-if="item.liveStatus =='2'" >已结束</view>
					</view>
					<view class="cl-author">
						<image class="author-img" src="https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg"></image>
						<view class="author-info">
							<view class="author-name">{{item.authorName}}</view>
							<view class="author-hosp">{{item.orgName}}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
	
</template>

<script>
	import {
		reservationLive,
	} from '@/util/index.js'
	export default {
		name: "expert-list",
		//属性
		props: {
			dataList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				maskState: 0,
				content: '',
				focus: false,
			};
		},
		created() {},
		methods: {
			watchLive(item) {
				if(item.liveStatus == '1'){
					uni.showToast({
						title:'直播未开始，请耐心等待...',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:`../../articleVideo/live-video/live-video?id=${item.id}&liveStatus=${item.liveStatus}`
				})
			},
			reservation(id,index) {
				reservationLive({
					liveId: id
				}).then((res) => {
					uni.showToast({
						title:'操作成功！',
						icon:'none'
					})
					this.$emit('refreshLive')
				})
			},
			
		}

	}
</script>

<style lang="less">
	.cl-box {
		width: 100%;
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eeeeee;

		// align-items: center;
		.cl-img {
			width: 250rpx;
			height: 200rpx;
			display: block;
			border-radius: 10rpx;
			// image {
			// 	width: 100%;
			// 	height: 100%;
			// }
		}

		.cl-info {
			// flex: 1;
			width: 460rpx;
			padding-left: 20rpx;
			.cl-right{
				display: flex;
				justify-content: space-between;
				.cl-btn{
					width: 130rpx;
					height: 60rpx;
					background-color: #0078f8;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
					border-radius: 10rpx;
				}
				.cl-btn-grey{
					background-color: #9b9b9b;
				}
				.cl-btn-orange{
					background-color: #e5a910;
				}
			}
			.cl-title {
				font-size: 30rpx;
				font-weight: 500;
				// text-overflow: ellipsis;
				overflow: hidden;
				// white-space: nowrap;
				width: 300rpx;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-height: 1.2;
				height: 2.4em;
				display: -webkit-box;
			}

			.cl-author {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.author-img {
					width: 85rpx;
					height: 85rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.author-info {
					width: 330rpx;

					view {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 330rpx;
						line-height: 38rpx;
					}

					.author-hosp {
						color: #9b9b9b;
						font-size: 25rpx;
					}
				}
			}
		}
	}
</style>
